<template>
    <el-card style="width: 26%;left: 37%;height: 100vh;background-color: black;top: 0px" class="card99">
        <!-- 顶部图标 -->
        <div style="text-align: right">
            <i class="el-icon-news" style="color: white;font-size: 30px;margin-right: 5px;margin-top: 5px"></i>
        </div>

        <!-- 用户头像和名字 -->
        <div style="margin-top: 20px;text-align: center">
            <el-avatar style="width: 180px;height: 180px">
                <div style="font-size: 30px;margin-top: 60px">{{ yourname }}</div>
            </el-avatar>
            <div style="color: white;margin-top: 10px">{{ yourname }}</div>
        </div>

        <!-- 操作按钮 -->
        <el-row :gutter="40" style="margin-top: 40vh">
            <el-col :span="12" style="text-align: right">
                <el-button @click="startCall" class="b1" icon="el-icon-phone-outline" circle style="width: 56px;height: 56px;background-color: #67C23A;border-color: #67C23A"></el-button>
            </el-col>
            <el-col :span="12" style="text-align: left">
                <el-button @click="stopCall" class="b1" icon="el-icon-phone" circle style="width: 56px;height: 56px;background-color: #F56C6C;border-color: #F56C6C"></el-button>
            </el-col>
        </el-row>

        <!-- 输入对话框 -->
        <el-dialog title="输入" :visible.sync="isshow" width="30%">
            <el-input v-model="myname" placeholder="请输入你的名称"></el-input>
            <el-input v-model="yourname" placeholder="请输入要通话的用户" style="margin-top: 10px;margin-bottom: 10px"></el-input>
            <div>
                <el-button @click="isshow = false">取 消</el-button>
                <el-button type="primary" @click="shure">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
  name: 'CallCard',
  data() {
    return {
      yourname: null,
      myname: null,
      isshow: true,
      ws: null,
      audioCtx: null,
      scriptNode: null,
      mediaStack: null,
      source: null,
      play: true,
    };
  },
  methods: {
    shure() {
      this.isshow = false;
    },
    initWs1() {
      // 初始化WebSocket连接
      this.ws = new WebSocket(`ws://localhost:9080/web/video/${this.myname}/${this.yourname}`);
      this.ws.onopen = () => {
        console.log('socket 已连接');
      };
      this.ws.binaryType = 'arraybuffer';
      this.ws.onmessage = ({ data }) => {
        console.log(`接收到的数据--》${data}`);
        const buffer = new Float32Array(data);
        const myArrayBuffer = this.audioCtx.createBuffer(1, 4096, 48000);
        const nowBuffering = myArrayBuffer.getChannelData(0);
        for (let i = 0; i < 4096; i++) {
          nowBuffering[i] = buffer[i];
        }
        const source = this.audioCtx.createBufferSource();
        source.buffer = myArrayBuffer;
        const gainNode = this.audioCtx.createGain();
        source.connect(gainNode);
        gainNode.connect(this.audioCtx.destination);
        const muteValue = this.play ? 1 : 0;
        gainNode.gain.setValueAtTime(muteValue, this.audioCtx.currentTime);
        source.start();
      };
      this.ws.onerror = (e) => {
        console.log('发生错误', e);
      };
      this.ws.onclose = () => {
        console.log('socket closed');
      };
    },
    startCall() {
      this.play = true;
      this.audioCtx = new AudioContext();
      this.initWs1();
      this.scriptNode = this.audioCtx.createScriptProcessor(4096, 1, 1);
      navigator.mediaDevices.getUserMedia({ audio: true, video: false })
        .then((stream) => {
          this.mediaStack = stream;
          this.source = this.audioCtx.createMediaStreamSource(stream);
          this.source.connect(this.scriptNode);
          this.scriptNode.connect(this.audioCtx.destination);
        })
        .catch((err) => {
          console.log('err', err);
        });
      this.scriptNode.onaudioprocess = (audioProcessingEvent) => {
        const { inputBuffer } = audioProcessingEvent;
        const inputData = inputBuffer.getChannelData(0);
        if (this.ws.readyState === 1) {
          this.ws.send(inputData);
        }
      };
    },
    stopCall() {
      this.play = false;
      this.mediaStack.getTracks()[0].stop();
      this.scriptNode.disconnect();
    },
  },
};
</script>

<style scoped>
.el-dialog {
    z-index: 3000000 !important;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}
.card99 {
    position: fixed;
    z-index: 10000;
}
.b1 {
    font-size: 23px !important;
    color: black;
}
</style>
